import React from 'react';
import { View, Text ,Button,Image} from 'react-native';
import { createStackNavigator,createSwitchNavigator } from 'react-navigation';

export default class AppSwitchNavigation extends React.Component {
    render() {
        /* In the root component we are rendering the app navigator */
        return <AppNavigator />;
    }
}

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>HomeScreen</Text>
                <Button
                    title="HomeScreen"

                    onPress={()=>{
                    this.props.navigation.navigate('ForgotPasswordScreen')
                }}/>
            </View>
        );
    }
}

class DetailPage extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>DetailPage</Text>
                <Button
                    title="DetailPage"

                    onPress={()=>{
                    this.props.navigation.navigate('SignInScreen')
                }}/>
            </View>
        );
    }
}

class SignInScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>SignInScreen</Text>
                <Button
                    title="SignInScreen"
                    onPress={()=>{
                    this.props.navigation.navigate('ForgotPasswordScreen')
                }}/>
            </View>
        );
    }
}

class ForgotPasswordScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>ForgotPasswordScreen</Text>
                <Button
                    title="ForgotPasswordScreen"
                    onPress={()=>{
                    this.props.navigation.navigate('Main')
                }}/>
            </View>
        );
    }
}

const AuthenticationNavigator = createStackNavigator({
    SignInScreen: SignInScreen,
    ForgotPasswordScreen: ForgotPasswordScreen,
});

const Main = createStackNavigator({
    HomeScreen: HomeScreen,
    DetailPage: DetailPage,
});



const AppNavigator = createSwitchNavigator({
    Main: Main,
    AuthenticationNavigator: AuthenticationNavigator, // This screen renders a navigator!

});